<!DOCTYPE html>
<html>
<head>
  <title>jQuery .toggle() Example</title>
  <link rel="stylesheet" type="text/css" href="../styles/core.css"/>
  <script type="text/javascript" src="../scripts/jquery-1.4.js"></script>
  <script type="text/javascript">
    $(function () {

      $('img[src*=small]').toggle(
          function () {
            $(this).attr('src', $(this).attr('src').replace(/small/, 'medium'));
          },
          function () {
            $(this).attr('src', $(this).attr('src').replace(/medium/, 'large'));
          },
          function () {
            $(this).attr('src', $(this).attr('src').replace(/large/, 'small'));
          }
      );

    });
  </script>
  <style type="text/css">
    img {
      cursor: pointer;
    }
  </style>
</head>

<body>

<div>Click on the image to change its size.</div>
<div>
  <img src="hibiscus.small.jpg" alt="Hibiscus"/>
</div>

</body>
</html>
